const slotSymbols = [
    ['😀', '😁', '😂', '😃', '😄', '😅', '😆', '😇', '😈', '😉', '😊', '🙂'],
    ['🍎', '🍏', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🍈', '🍒', '🍑'],
    ['⭐️', '🌟', '✨', '💫', '⚡️', '☄️', '🌠', '🌌', '🌙', '🌕', '🌖', '🌗']
];
const handle = document.querySelector('.handle')

//生成显示单个符号的div
function createSymbolElement(symbol) {//(pic_uri)
    const div = document.createElement('div');
    div.classList.add('symbol');
    //div.style.backgroundImage = "url('')"
    div.textContent = symbol;
    return div;
}

//定于spin函数
let spun = false;
function spin() {
    //如果在旋转，复位
    if (spun) {
        reset();
    }
    //获取三个转盘
    const slots = document.querySelectorAll('.slot');
    let completedSlots = 0;
    //对于每个转盘
    slots.forEach((slot, index) => {
        const symbols = slot.querySelector('.symbols');//获取所有符号div元素的父级容器
        const symbolHeight = symbols.querySelector('.symbol')?.clientHeight;//获取符号div元素高度
        const symbolCount = symbols.childElementCount;//获取每个转盘里符号div的个数

        symbols.innerHTML = '';//清空符号元素父级容器

        for (let i = 0; i < 3; i++) {
            slotSymbols[index].forEach(symbol => {
                symbols.appendChild(createSymbolElement(symbol));
            });
        }
        symbols.appendChild(createSymbolElement('❓'));//替换成问号

        //给每个转盘填充符号
        for (let i = 0; i < 3; i++) {
            slotSymbols[index].forEach(symbol => {
                symbols.appendChild(createSymbolElement(symbol));
            });
        }
        
        //const totalDistance = symbolCount * symbolHeight;
        //计算随机上翻的距离
        const randomOffset = -Math.floor(Math.random() * ((symbolCount - 1)/2) + 1) * symbolHeight;
        symbols.style.top = symbols.offsetTop + randomOffset+'px';//设置每个转盘移动距离

        //监听样式的完成
        symbols.addEventListener('transitionend', () => {
            completedSlots++;
            if (completedSlots === slots.length) {
                logDisplayedSymbols();
            }
        }, { once: true });
    });

    spun = true;
}

//重置转盘的函数
function reset() {
    const slots = document.querySelectorAll('.slot');

    slots.forEach(slot => {
        const symbols = slot.querySelector('.symbols');
        symbols.style.transition = 'none';//清空transition样式
        symbols.style.top = '-6300px';//归位
        symbols.offsetHeight;//触发浏览器重新渲染
        symbols.style.transition = '';//去除none，恢复为css中定义的动画绑定
    });
}

//记录下最终展示的符号
function logDisplayedSymbols() {
    const slots = document.querySelectorAll('.slot');
    const displayedSymbols = [];

    slots.forEach((slot, index) => {
        const symbols = slot.querySelector('.symbols');
        const symbolIndex = Math.floor(Math.abs(parseInt(symbols.style.top, 10)) / slot.clientHeight) % slotSymbols[index].length;
        const displayedSymbol = slotSymbols[index][symbolIndex];
        displayedSymbols.push(displayedSymbol);
    });

    console.log(displayedSymbols);
}

//给把手添加事件监听
handle.addEventListener('mousedown',function(){
    this.style.cursor = 'url(grab.png) 50 50, pointer'
    this.style.backgroundPosition = "-86px 20px"
    spin()
})

handle.addEventListener('mouseup',function(){
    this.style.cursor = 'url(reach.png) 50 50, pointer'
    this.style.backgroundPosition = "0px 17px"
})
